<template>
	<view>
		<view class="base">
			<view class="base-item">
				<view class="text-label">联系人</view>
				<input v-model="dataForm.contact" class="phone" maxlength="15" placeholder="请输入联系人">
			</view>
			<view class="base-item">
				<view class="text-label">联系方式</view>
				<input v-model="dataForm.phone" class="phone" type="number" maxlength="15" placeholder="请输入联系方式">
			</view>
			<view class="base-item">
				<view class="text-label">店铺昵称</view>
				<input v-model="dataForm.storeName" class="phone" type="number" maxlength="50" placeholder="请输入您的店铺昵称">
			</view>
			<view class="base-item">
				<view class="text-label">经营范围</view>
				<view>
					<picker v-model="dataForm.manager" @change="picker($event)" mode='selector' :value="arrayIndex" :range="arrayList"
						range-key="value">
						<!-- <view class="phone">{{arrayItem.value?arrayItem.value:'请选择经营范围'}}</view> -->
						<view class="phone">{{dataForm.manager?dataForm.manager:'请选择经营范围'}}</view>
					</picker>
				</view>
			</view>
			<view class="img-item">
				<view class="top base-item">
					<view class="text-label">门店照片</view>
				</view>
				<view class="bot reverse">
					<uploadImg class="uploadImgs mag-left" ref='uploadImg' :mode="storePhoto1"
						@chooseFile='storePhoto' @imgDelete='imgDeletestorePhoto'
						@tap="getUploadImg('storePhoto')" @getImagePath="getImagePath()" :control="control"
						:columnNum="columnNum" />
				</view>
			</view>
			<view class="img-item">
				<view class="top base-item">
					<view class="text-label">营业执照</view>
				</view>
				<view class="bot reverse">
					<uploadImg class="uploadImgs mag-left" ref='uploadImg' :mode="licensePhoto1"
						@chooseFile='licensePhoto' @imgDelete='imgDeletelicensePhoto'
						@tap="getUploadImg('licensePhoto')" @getImagePath="getImagePath()" :control="control"
						:columnNum="columnNum" />
				</view>
			</view>
		</view>
		<!-- !-- 提交按钮 --> 
		<view class="btn" @tap="confirm()">
			<button class="confirm">提交</button>
		</view>
	</view>
</template>

<script>
	import uploadImg from "../components/uploadImg/uploadImg.vue"
	const http = require('../../utils/http.js')
	export default {
		components: {
			uploadImg
		},
		data() {
			return {
				currentImg:'',//当前图片
				dataForm: {
					settleType:'商家入驻',
					source:'小程序录入'
				},
				storePhoto1: [],
				licensePhoto1:[],
				control: true,
				arrayItem:{},
				arrayIndex: 0,
				arrayList: [{
					key: 0,
					value: '餐饮'
				}, {
					key: 1,
					value: '酒店'
				}, {
					key: 2,
					value: '生鲜果蔬'
				}, {
					key: 3,
					value: '甜品饮品'
				}, {
					key: 4,
					value: '娱乐'
				}, {
					key: 5,
					value: '鲜花'
				}, {
					key: 6,
					value: '其他'
				}],
			}
		},
		mounted() {
			this.getdetail()
		},
		methods: {
			//获取详情
			getdetail(){
				const paramss = {
					url: '/gscloud_system/system/settle/getByUser',
					method: 'GET',
					data: {
						settleType: this.dataForm.settleType
					},
					callBack: res => {
						console.log(res)
						if(res){
						 this.dataForm = res
						 this.dataForm.manager = res.manager
						 this.storePhoto1.push(res.storePhoto)
						 this.licensePhoto1.push(res.licensePhoto)
						}
						
					}
				}
				http.request(paramss)
			},
			// 提交
			confirm(){
				if (!this.dataForm.contact) {
					uni.showToast({
						title: '请输入联系人！',
					 icon: 'none'
					})
					return
				}
				if (!this.dataForm.phone) {
					uni.showToast({
					 title: '请输入联系方式！',
						icon: 'none'
					})
					return
				}
				if (!this.dataForm.storeName) {
					uni.showToast({
					 title: '请输入店铺昵称！',
						icon: 'none'
					})
					return
				}
				if (!this.dataForm.manager) {
					uni.showToast({
					 title: '请选择经营范围！',
						icon: 'none'
					})
					return
				}
				if (!this.dataForm.storePhoto) {
					uni.showToast({
						title: '请上传门店照片！',
						icon: 'none'
					})
					return
				}
				if (!this.dataForm.licensePhoto) {
					uni.showToast({
						title: '请上传营业执照！',
						icon: 'none'
					})
					return
				}
				const params = {
					url: '/gscloud_system/system/settle',
					method: 'POST',
					data: this.dataForm,
					callBack: res => {
						console.log(res)
						uni.showToast({
							title: '加入成功！',
							icon: 'none'
						})
						setTimeout(() => {
							let pages = getCurrentPages()//页面栈
							let prePage = pages[pages.length - 2]//上一页
							prePage.$vm.reFresh = Math.random()//触发上一页监听器
							uni.navigateBack()//返回上一页
						}, 1500)
					}
				}
				http.request(params)
			},
			picker(e) {
				this.arrayItem = this.arrayList[e.target.value];
				this.dataForm.manager = this.arrayList[e.target.value].value;
			},
			getUploadImg: function(type) {
				this.currentImg = type
			},
			// 服务器返回图片地址
			getImagePath(imgUrl) {
				switch (this.currentImg) {
				  case 'storePhoto':
				    this.dataForm.storePhoto = imgUrl
				    break
				  case 'licensePhoto':
				    this.dataForm.licensePhoto = imgUrl
				    break
				}
			},
			storePhoto(list, v) {
				this.dataForm.storePhoto = v
				console.log(this.dataForm.storePhoto)
			},
			licensePhoto(list, v) {
				this.dataForm.licensePhoto = v
				console.log(this.dataForm.licensePhoto)
			},
			// / 删除图片： list：删除返回删除后剩余的图片数组 eq：返回删除的数组 /
			imgDeletestorePhoto(list, eq) {
				this.dataForm.storePhoto = ''
			},
			imgDeletelicensePhoto(list, eq) {
				this.dataForm.licensePhoto = ''
			},
		},
	}
</script>

<style lang="scss" scoped>
	//提交按钮
	.btn {
		padding: 340rpx 0 50rpx 0;
		margin: auto;
	
		.confirm {
			width: 710rpx;
			height: 72rpx;
			background: linear-gradient(138deg, rgba(195, 13, 35, 0.8) 0%, #C30D23 100%);
			border-radius: 100rpx 100rpx 100rpx 100rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 72rpx;
		}
	}
	.base {
		.isimport {
			margin-top: 76rpx;
		}

		.base-item {
			background-color: white;
			margin-bottom: 5rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 20rpx;

			.text-label {
				font-size: 28rpx;
				font-weight: 400;
				color: #666666
			}

			input {
				text-align: right;
			}

			::-webkit-input-placeholder {
				/* WebKit browsers */
				direction: rtl;
			}

			:-moz-placeholder {
				/* Mozilla Firefox 4 to 18 */
				direction: rtl;
			}

			::-moz-placeholder {
				/* Mozilla Firefox 19+ but I'm not sure about working */
				direction: rtl;
			}

			:-ms-input-placeholder {
				/* Internet Explorer 10+ */
				direction: rtl;
			}

			.phone {
				// width: 210rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
			}
		}

		.img-item {
			background-color: white;
			margin-bottom: 5rpx;
			padding-bottom: 20rpx;

			.top {
				.img-label {
					display: flex;

					/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
					::v-deep radio .wx-radio-input.wx-radio-input-checked {
						background-color: white;
						border: 1px solid #999999;
					}

					/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
					::v-deep radio .wx-radio-input.wx-radio-input-checked::before {
						background-color: #C30D23;
						color: #C30D23;
						border-radius: 50%;
					}

					.radi {
						margin-right: 60rpx;
					}

					.btnUp {
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
					}

					.jt {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			// 单张图片
			.reverse {
				display: flex;
				flex-direction: row-reverse;
			}

			// 两张
			.around {
				display: flex;
				justify-content: space-around;
			}

			.bot {
				.uploadImgs {
					display: inline-block;
					width: 330rpx;
					height: 200rpx;
					background: #F2F2F2;
					margin: 0rpx 20rpx 10rpx;

					::v-deep .column4 {
						width: 100%;
					}

					::v-deep .imglistItem {
						width: 100%;
						height: 200rpx;
					}
				}
			}
		}
	}
</style>
